<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数据录入</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/datepicker/bootstrap-datepicker3.css}">
</head>
<body>
    <div th:insert="~{common/header::header2}"></div>
    <div class="container-fluid">
        <div class="row">
            <div th:insert="~{common/menu::menu}" class="col-md-2"></div>
            <div class="col-md-10">
                <ul class="breadcrumb">
                    <li><a th:href="@{/main}">后台主页</a></li>
                    <li>数据录入</li>
                </ul>
                <div class="row">
                    <div class="col-md-4">
                        <div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
                            <div class="input-group-addon">数据日期</div>
                            <input class="form-control" size="16" type="text" value="" readonly id="dataDate">
                            <div class="input-group-addon">
                                <span class="add-on glyphicon glyphicon-calendar"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn-primary" id="btnSubmit">提交 <span
                                class="glyphicon glyphicon-log-in"></span></button>
                    </div>
                </div>
                <div class="row">
                    <table class="table">
                        <colgroup>
                            <col span="7" width="150">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>省份</th>
                            <th>确诊人数</th>
                            <th>疑似人数</th>
                            <th>死亡人数</th>
                            <th>治愈人数</th>
                            <th>无症状人数</th>
                            <th>境外输入人数</th>
                        </tr>
                        </thead>
                        <tbody id="body1">
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div id="msg"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/bootstrap/datepicker/bootstrap-datepicker.js}"></script>
<script th:src="@{/bootstrap/datepicker/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:inline="javascript">
    var provinces = null;
    $(function () {
        var datepicker = $("#datepicker");
        datepicker.datepicker({
            language: 'zh-CN',
            autoclose: true
        });
        var current = new Date();
        datepicker.datepicker("setDate",current);
        var date1 = new Date()
        date1.setDate(current.getDate() - 7);
        datepicker.datepicker("setStartDate", date1);
        datepicker.datepicker("setEndDate", current);
        //给日期选择框设置事件处理函数
        datepicker.datepicker().on("changeDate", loadProvinceList);
        //装载省份列表
        loadProvinceList();
        //给提交按钮绑定事件处理函数
        $("#btnSubmit").click(checkAndSubmitData);
    });
    function checkAndSubmitData() {
        var valid = true;
        var affirmed = $("input[name=affirmed]");
        var suspected = $("input[name=suspected]");
        var cured = $("input[name=cured]");
        var dead = $("input[name=dead]");

        affirmed.each(function (index, element) {
            if (isNaN(Number(element.value))) {
                valid = false;
            }
        });
        if (valid) {
            //提交
            var dataArray = [];
            for (var i = 0; i < provinces.length; i++) {
                var obj = {};
                obj.cityId = provinces[i].cityId;
                obj.affirmed = affirmed.get(i).value;
                obj.suspected = suspected.get(i).value;
                obj.cured = cured.get(i).value;
                obj.dead = dead.get(i).value;
                dataArray.push(obj);
            }
            //
            var date = $("#dataDate").val();
            var data = {};
            data.date = date;
            data.array = dataArray;
            //
            $.ajax({
                url: [[${#request.getContextPath()}]]+"/epidemic-info/ajax/input",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (resp) {
                    if(resp.code<0){
                        alert(resp.msg);
                        $(location).attr('href', [[${#request.getContextPath()}]] + "/login");
                    }else{
                        fillProvinceToTable(resp.data);
                    }
                }
            });

        } else {
            alert("请检查你的输入，确保输入有效的数值!");
        }
    }
    function loadProvinceList() {
        //获取当前日期框中的值
        var date = $("#dataDate").val();
        console.log(date);
        //从服务器获取取还没有录入数据的省份列表
        $.get([[${#request.getContextPath()}]]+"/city-info/ajax/noDataList/"+date, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillProvinceToTable(resp.data);
            }
        }, "json");
    }

    function fillProvinceToTable(array) {
        //清空消息
        $("#msg").html("");
        //清空表格
        var tbody1 = $("#body1");
        tbody1.empty();
        if (array && array.length > 0) {
            provinces = array;
            console.log(provinces.length);
            //填充到table中
            $.each(array, function (index, province) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.text(province.cityName);
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="affirmed" value="0">');
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="suspected" value="0">');
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="cured" value="0">');
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="dead" value="0">');
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="symptomless" value="0">');
                tr.append(td);
                td = $("<td>");
                td.html('<input type="text"  name="overseasInput" value="0">');
                tr.append(td);
                tbody1.append(tr);
            });
        } else {
            $("#msg").html("本日所有省份都已经录入了数据!");
        }
    }
</script>
</html>